<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js脚本解析器测试</title>
    <style>
        body{
            background-color: #282C34;
            text-align: center;
        }
        body>div{
            margin: 0 auto;
            text-align: center;
            width: 500px;
        }
        #mainBody{
            height: 237px;
            background-image: url(./背景.jpg);
            background-repeat: no-repeat;/*只显示一次 */
            background-position: center center;/*居中显示*/
            background-size: contain;
        }
        #mainBody>div{
            overflow: hidden;/*解决浮动塌陷*/
            margin-left: 142px;/*设置左边距*/
            opacity: 40%;/*设置透明度*/
        }
        #mainBody>div>div{
            border-radius: 50%;/*设置圆角*/
            width: 40px;
            height: 40px;
            font-size: 0;/*设置为0,方便定时器使用*/
            float: left;/*向左浮动*/
            position: relative;/*相对于 mainBody的定位*/
            margin: 2px 1.7px;/*设置div之间的外边距*/
        }
        #mainBody>div>div:hover{/*鼠标移动到上面*/
            background-color: aqua;
        }
        #mainBody>div>div:active{/*点击时*/
            background-color: blanchedalmond;
        }
    </style>
    <script src="./javascript.js"></script>
</head>
<body>
    <div id="main">
        <div id="mainBody">
            <div>
                <div id="m1" onclick="dieOut(this)"></div>
                <div id="m2" onclick="dieOut(this)"></div>
                <div id="m3" onclick="dieOut(this)"></div>
                <div id="m4" onclick="dieOut(this)"></div>
                <div id="m5" onclick="dieOut(this)"></div>
            </div>
            <div>
                <div id="m6" onclick="dieOut(this)"></div>
                <div id="m7" onclick="dieOut(this)"></div>
                <div id="m8" onclick="dieOut(this)"></div>
                <div id="m9" onclick="dieOut(this)"></div>
                <div id="m10" onclick="dieOut(this)"></div>
            </div>
            <div>
                <div id="m11" onclick="dieOut(this)"></div>
                <div id="m12" onclick="dieOut(this)"></div>
                <div id="m13" onclick="dieOut(this)"></div>
                <div id="m14" onclick="dieOut(this)"></div>
                <div id="m15" onclick="dieOut(this)"></div>
            </div>
        </div>
        <div style="height: 10px;"></div>
        <div id="append">
            <!-- <textarea id="data" cols="60" rows="10" ></textarea> -->
            <textarea id="data" cols="60" rows="10" >12 234 23 23  2 2 523 25 5 2345 3 4 3 4 6 456 5 464 65 6 5 65  57 5 7  34  5  5  23  5 2 5 2 3 5 2 323  6 43  6 45  242 3 4 2 5 2 5 34 5 34  6 4</textarea>
        </div>
        <div>
            <!-- <input type="button" value="Test" onclick="Test()"> -->
            <input type="button" value="启动" onclick="start()">
        </div>
    </div>
</body>
</html>